<%@ page import="org.springframework.ui.Model" %>
<%@ page import="com.web.controller.UserController"  %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>校园百事通系统</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/lr-css/bootstrap.min.css" type="text/css"></link>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/lr-css/mycss.css" type="text/css"></link>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/lr-js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/lr-js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/lr-js/bootstrapValidator.min.js"></script>
    <script>
        <%
            String msg = (String) session.getAttribute("msg");
            session.setAttribute("msg","");
            if(msg==null||msg==""||msg.equals("")||msg.equals(null)) msg="";
            else{%>
        window.alert(${msg});<%
		}
	%>
        $(function(){
            //客户端表单校验，使用bootstrapValidator插件
            $('#frmLogin').bootstrapValidator({
                feedbackIcons:{
                    valid:'glyphicon glyphicon-ok',
                    invalid:'glyphicon glyphicon-remove',
                    validating:'glyphicon glyphicon-refresh'
                },
                fields:{
                    tel:{
                        validators:{
                            notEmpty:{
                                message:'注册电话不能为空'
                            },
                            regexp: {//正则验证
                                regexp: /^1\d{10}$/,
                                message: '请输入11位数字的电话号码'
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },
                            stringLength: {//检测长度
                                max: 20,
                                message: '长度不能超过20'
                            },
                            identical: {
                                field: 'confirm',
                                message: '确认密码与密码不一致'
                            }
                        }
                    },
                    confirm: {
                        validators: {
                            notEmpty: {
                                message: '确认密码不能为空'
                            },
                            stringLength: {
                                max: 20,
                                message: '长度不能超过20'
                            },
                            identical: {
                                field: 'password',
                                message: '确认密码与密码不一致'
                            }
                        }
                    },
                    username: {
                        validators: {
                            notEmpty: {
                                message: '姓名不能为空'
                            },
                            stringLength: {
                                max: 20,
                                message: '长度不能超过20'
                            }
                        }
                    }
                }
            });
        });
        function login(){
            window.location.href="${pageContext.request.contextPath }/login.jsp";
        }
    </script>

</head>
<body>
<!-- 使用自定义css样式 div-signin 完成元素居中-->
<div class="container div-signin">
    <div class="panel panel-primary div-shadow">
        <!-- h3标签加载自定义样式，完成文字居中和上下间距调整 -->
        <div>
            <h3>校园百事通系统用户注册</h3>
        </div>
        <font color="red">
            <span id="message">${msg}</span>
        <%session.setAttribute("msg", ""); %>
        </font>
        <div class="panel-body">
            <!-- login form start -->
            <form action="${pageContext.request.contextPath }/register.action" class="form-horizontal" method="post" id="frmLogin">
                <div class="form-group">
                    <label class="col-sm-3 control-label">注册电话：</label>
                    <div class="col-sm-9">
                        <input class="form-control" type="text" placeholder="请输入注册电话" name="tel">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</label>
                    <div class="col-sm-9">
                        <input class="form-control" type="text" placeholder="请输入姓名" name="username">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                    <div class="col-sm-9">
                        <input class="form-control" type="password" placeholder="请输入密码" name="password">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">确认密码：</label>
                    <div class="col-sm-9">
                        <input class="form-control" type="password" placeholder="请确认密码" name="confirm">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">身&nbsp;&nbsp;&nbsp;&nbsp;份：</label>
                    <div class="col-sm-9">
                        <input type="radio" name="role" value="user" checked />普通用户
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2">
                    </div>
                    <div class="col-sm-9 padding-left-0">
                        <div class="col-sm-4">
                            <button type="submit">注&nbsp;&nbsp;册</button>
                        </div>
                        <div class="col-sm-4">
                            <button type="reset">重&nbsp;&nbsp;置</button>
                        </div>
                        <div class="col-sm-4">
                            <button onclick="login()">登&nbsp;&nbsp;陆</button>
                        </div>
                    </div>
                </div>
            </form>
            <!-- login form end -->
        </div>
    </div>
</div>
<!-- 页尾 版权声明 -->
<div class="container">
    <div class="col-sm-12 foot-css">
        <p class="text-muted credit">
        </p>
    </div>
</div>
</body>
</html>
